<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="请输入名称" v-model="queryParam.name" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handleSearch(true)" icon="search">查询</a-button>
              </span>
            </a-col>
            <a-col :md="1" :sm="24" :offset="14">
              <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        :pagination="{ 'show-total': total => `共 ${total} 条` }"
      >
        <template slot="type" slot-scope="type">
          {{ type | typeFilter }}
        </template>
        <template slot="discount_status" slot-scope="discount_status">
          {{ discount_status | discountStatusFilter }}
        </template>
        <template slot="is_overdue" slot-scope="is_overdue">
          <a-tag :color="is_overdue === 0 ? 'blue' : 'red'">{{ is_overdue | kindsStatusFilter }}</a-tag>
        </template>
        <template slot="status" slot-scope="status">
          <a-tag :color="status === 1 ? 'blue' : 'red'">{{ status | kindsStatusFilter }}</a-tag>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handleStatus(record)">{{ record.status == 1 ? '下架' : '上架' }}</a>
          <a-divider type="vertical" />
          <a @click="handleDelete(record)">删除</a>
        </span>
      </s-table>

      <create-form ref="createModal" @ok="handleSearch" />
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { couponList, couponDel, couponPutaway, couponDownfall } from '@/api/coupon'
import orderStatus from '@/mixins/orderStatus'
import coupon, { GENRE } from '@/mixins/coupon'
import CreateForm from './modules/couponForm'
import formTableMixin from '@/mixins/formTableMixin'

const columns = [
  {
    title: '类型',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '折扣类型',
    dataIndex: 'genre',
    customRender (text) {
      return GENRE[text]
    }
  },
  {
    title: '折扣(满减)',
    dataIndex: 'discount',
    customRender (text, record) {
      return record.genre === 0 ? text + '折' : `满${record.full_price}减${record.minus_price}`
    }
  },
  {
    title: '开始时间',
    dataIndex: 'atime',
    customRender (text) {
      return text.slice(0, 10)
    }
  },
  {
    title: '结束时间',
    dataIndex: 'etime',
    customRender (text) {
      return text.slice(0, 10)
    }
  },
  {
    title: '是否过期',
    dataIndex: 'is_overdue',
    scopedSlots: { customRender: 'is_overdue' }
  },
  {
    title: '优惠券场景',
    dataIndex: 'discount_status',
    scopedSlots: { customRender: 'discount_status' }
  },
  {
    title: '是否上架',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'CouponList',
  mixins: [orderStatus, coupon, formTableMixin],
  components: {
    CreateForm
  },
  data () {
    this.columns = columns
    this.listAction = parameter =>
      couponList(parameter).then(res => {
        const data = res.data.data
        data.forEach(item => {
          item.is_overdue = this.overdueFilter(item.etime)
        })
        return res
      })
    this.delAction = couponDel
    return {
    }
  },
  methods: {
    overdueFilter (date) {
      const newDate = Date.now()
      const dateParam = new Date(date).getTime()
      return newDate - dateParam > 0 ? 1 : 0
    },
    handleStatus (record) {
      this.$confirm({
        title: '你确定要进行此项操作吗?',
        content: (record.status === 1 ? '下架' : '上架') + '商品',
        onOk: () => {
          const action = record.status === 1 ? couponDownfall : couponPutaway
          action({ id: record.id })
            .then(res => {
              this.$refs.table.refresh()
              this.$message.success('操作成功')
            })
            .catch(() => {})
        }
      })
    }
  }
}
</script>
